<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表单校验 - Xui Demo</title>
	<!-- demo data -->
	<link rel="stylesheet" type="text/css" href="../demo.css">
	
	<!-- xui -->
	<link rel="stylesheet" type="text/css" href="../../xui.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../xui.js"></script>
	
	<!-- xcheck -->
	<script type="text/javascript">
		$(function(){
			/**
			 * ================== 表单验证控件参数说明 ================== 
			 * 	 
			 * name		(必填)需要验证的表单字段
			 * label	(可选)验证未通过提示消息的前缀
			 * regular	(可选)自定义正则验证, msgRegular为错误提示
			 * check	(可选)自定义验证函数, msgCheck为错误提示
			 * xcheck	(可选)xcheck验证类型
			 * 其他参数可以参考xui.js源码xcheck->defaults
			 *
			 * ================== xcheck验证类型 ==================
			 * 	 
			 *		null 		非空验证
			 *		email 		电子邮件验证
			 *		phone 		手机验证
			 *		phoneline 	座机验证
			 *		phoneall 	手机+座机验证
			 *		url 		url验证
			 *		max:10 		最多可以输入 10 个字符
			 *		min:3		最少要输入 3 个字符
			 *		length:3:10   有效长度为 3~10 个字符
			 *		length:8 	有效长度为 8个字符
			 *		num 		数字验证
			 *		maxnum:100	请输入不大于 100 的数值
			 *		minnum:10	请输入不小于10 的数值
			 *		int 		整数+0
			 *		intp 		非负整数
			 *		intb 		非正整数
			 *		float 		浮点数+0
			 *		floatp 		非负浮点数
			 *		floatb 		非正浮点数
			 *
			 *	================== 单个验证 ==================
			 *	//#id为被验证元素id
			 *  var bool = $("#id").xcheck({label:"昵称", name:'name', xcheck:'null,length:3:10'});
			 *  
			 *
			 *	================== 多个验证 ==================
			 *	//#id为表单id,
			 *	//参数2默认为false遇到错就停止验证只显示当前验证错误提示，如果为true则全部验正并显示全部验证错误提示
			 *	var bool = $("#id").xcheck([
			 *		{label:"昵称", name:'name', xcheck:'null,length:3:10'},
			 *		{label:"电子邮件", name:'email', xcheck:'null,email,max:30'},
			 *		{label:"手机", name:'phone', xcheck:'null,phone'}
			 *	],true);
			 *	
			 *	================== 表单自动验证 ==================
			 */
			var xform = $("#xform").xform({
				checkall:true,		//默认为false遇到错就停止验证只显示当前验证错误提示，如果为true则全部验正并显示全部验证错误提示
				xcheck:[			//表单验证
					{label:"昵称", name:'name', xcheck:'null,length:3:10'},
					{label:"电子邮件", name:'email', xcheck:'null,email,max:30'},
					{label:"手机", name:'phone', xcheck:'null,phone'},
					{label:"网址", name:'url', xcheck:'null,url'},
					{label:"数字", name:'num', xcheck:'null,num'},
					{label:"正则", name:'regular',xcheck:'null',
						regular:/^[0-9]$/,					//自定义正则验证
						msgRegular:"自定义正则提示"
					},{label:"自定义", name:'check', xcheck:'null',
						check:function(){ return false; },	//自定义函数验证
						msgCheck:"自定义验证提示"
					}
				]
				//url:"表单提交地址"
				//其他表单参数请参考表单demo或xui.js源码xform—>defaults
			});
			
			$("#submit").click(function(){
				xform.submit();
			});
		})
	</script>
</head>
<body>
	<h2>表单校验</h2>
	<form class="xform" id="xform">
		<div class="xgroup">
			<label class="g1">昵称</label>
			<div class="g2"><input type="text" name="name"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">电子邮件</label>
			<div class="g2"><input type="text" name="email"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">手机</label>
			<div class="g2"><input type="text" name="phone"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">网址</label>
			<div class="g2"><input type="text" name="url"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">数字</label>
			<div class="g2"><input type="text" name="num"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">自定义正则</label>
			<div class="g2"><input type="text" name="regular"/></div>
		</div>
		<div class="xgroup">
			<label class="g1">自定义验证</label>
			<div class="g2"><input type="text" name="check"/></div>
		</div>
		<div class="xbar">
			<span class="xbtn" id="submit">提交</span>
		</div>
	</form>
	<div class="xinfo"></div>
</body>
</html>